<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>留言板</title>
    <link rel="stylesheet" href="stylesheets/css/index.css">
  </head>
  <body>
    <div class="container">
      <header>
        <h1 class="mesBody">随心留言板</h1>
        <p class="mesId">————随时随地，写我所想</p>
      </header>

      <nav>
        <ul>
          <li class="li"><a href="/users/logout" > 主页 </a></li>
          <li class="li"><a href="/users/login"> 登录 </a></li>
          <li class="li"><a href="/users/reg"> 注册 </a></li>
        </ul>
      </nav>

      <div class="main box">
        <div class="postedmessage">
          <div>
            <p class="mesBody">欢迎登录随心留言板！点击主页可查看所有留言，登录可实时留言。</p>
            <p class="mesId">随心留言板---2018-7-21 17:00:00</p>
          </div>
        </div>
        <form class="message" action="/" method="post">
          <textarea name="content" maxlength="100" ></textarea>
          <button type="submit" name="button" onclick="javascript:alert('请先登录，再留言。'); window.open('index.html')">留言</button>
        </form>
      </div>

      <div class="sideline box">
        <div class="links">
           <h1> 联系我们 </h1>
           <p> Telephone：xxxxxxxx </p>
           <p> Email：xxx@xxxxx </p>
           <p> 微信扫码： </p>
           <img src="images/weixinma.jpg" class="image">
         </div>
      </div>

      <footer>
        <p>使用条款和隐私条款。版权所有，保留一切权利。</p>
      </footer>

    </div>

    <script type="text/javascript">
      const pmes = document.querySelector(".postedmessage");
      const html = document.querySelector("html");
      console.log(pmes);

      function readTextFile(file, callback) {
        var rawFile = new XMLHttpRequest();
        rawFile.overrideMimeType("application/json");
        rawFile.open("GET", file, true);
        rawFile.onreadystatechange = function() {
            if (rawFile.readyState === 4 && rawFile.status == "200") {
                callback(rawFile.responseText);
            }
        }
        rawFile.send();
      }
      window.onload = readTextFile("../json/postmes.json", function(data){
          if (data){
            var meses = JSON.parse(data);
          }else{
            var meses = {};
          };
          console.log(meses);
          for(var i in meses){
            const mesbox = document.createElement("div");
            mesbox.innerHTML = `
            <p class="mesBody">${meses[i].content}</p>
            <p class="mesId">${meses[i].loginname}---${i}</p>
            `;
            pmes.appendChild(mesbox);
          }
        });

    </script>
  </body>
</html>
